<template>
	<view>
		<view class="banner_img"><image :src="film.f_pic2" mode=""></image></view>
		<view class="info_item">
			<text class="title">{{film.f_name}}</text>
			<text class="price">￥{{film.f_cost}}亿</text>
		</view>
		<view class="info_item">
			<view class="info_left">
				<text>推荐指数：</text>
				<u-rate :count="count" size="24" v-model="film.f_recommend"></u-rate>
			</view>
			<view class="info_right" @click="agreementDetail">
				<image src="../../static/indexImage/agreement.png" mode=""></image>
				<text>认购协议</text>
			</view>
		</view>
		<view class="info_item">
			<view class="info_left">
				<text>融资进度：</text>
				<u-line-progress
					:active-color="f_progress >= 100 ? '#D5D6DC' : '#EC5F58'"
					:percent="f_progress"
					inactive-color="#FFEBEA"
					:show-percent="false"
					height="34"
				></u-line-progress>
			</view>
			<view class="info_right"><text class="is_sale">已售{{film.f_progress}}%</text></view>
		</view>
		<view class="headline"><text class="title_box">项目信息</text></view>
		<view class="project_info">
			<view class="project_item">
				<text>制作成本</text>
				<text>{{film.f_cost}}亿</text>
			</view>
			<view class="project_item">
				<text class="color-red">优惠金额</text>
				<text>￥{{film.f_discount}}</text>
			</view>
			<view class="project_item">
				<text>融资比例</text>
				<text>{{film.f_financing}}%</text>
			</view>
			<view class="project_item">
				<text>剩余份额</text>
				<text>{{film.f_surplus}}份</text>
			</view>
			<view class="project_item">
				<text>投资门槛</text>
				<text>￥{{film.f_investment}}</text>
			</view>
			<view class="project_item">
				<text>开机时间</text>
				<text>{{film.f_startup}}</text>
			</view>
			<view class="project_item">
				<text>上映日期</text>
				<text>{{film.f_release}}</text>
			</view>
			<view class="project_item">
				<text>票房预测</text>
				<text>{{film.f_forecast}}</text>
			</view>
			<view class="project_item">
				<text>分红方式</text>
				<text>{{film.f_bonus}}</text>
			</view>
			<view class="project_item">
				<text>融资进度</text>
				<text>{{film.f_progress}}%</text>
			</view>
		</view>
		<view class="headline"><text class="title_box">影视简介</text></view>
		<view class="film_info">
			<view class="">项目名称：{{film.f_name}}</view>
			<view class="">出品公司：{{film.f_production}}</view>
			<view class="">上映时间：{{film.f_release}}</view>
		</view>
		<view class="banner_img"><image :src="film.f_pic3" mode=""></image></view>
		<view class="content_info">
			{{film.f_content}}
		</view>
		<view class="headline"><text class="title_box">演员阵容</text></view>
		<view class="film_info">
			<view class="">演员介绍：黄渤</view>
			<view class="">
				{{film.f_performer}}
			</view>
			<u-image :src="film.f_pic4" width="100%" height="500" style="margin-top: 20upx;"></u-image>
		</view>
		<view class="headline"><text class="title_box">影视项目投资（认购）流程</text></view>
		<view class="img_box"><u-image :src="film.f_pic5" width="100%" height="704"></u-image></view>
		<view class="headline"><text class="title_box" v-if="article.length">相关影讯</text></view>
		<view class="project_info" style="padding-top: 0;" v-if="article.length">
			<view class="project_item" v-for="(item,index) in article" :key="index"><text>{{item.a_title}}</text></view>
		</view>
		<view class="headline"><text class="title_box">相关推荐</text></view>
		<view class="recommend_list">
			<view class="recommend_item" v-for="(item, index) in recommendList" :key="index">
				<image :src="item.f_pic2" mode=""></image>
				<text>{{ item.f_name }}</text>
			</view>
		</view>
		<view class="headline"><text class="title_box">相关问答</text></view>
		<view class="film_info" v-for="(item,index) in question" :key="index">
			<view class="question_box">
				<image src="../../static/indexImage/question_icon.png" mode=""></image>
				<text>{{item.q_title}}</text>
			</view>
			<view class="answer_box">
				<image src="../../static/indexImage/answer_icon.png" mode=""></image>
				<text>{{item.q_detail}}</text>
			</view>
			<!-- <view class="question_box">
				<image src="../../static/indexImage/question_icon.png" mode=""></image>
				<text>影视公司不缺钱，为什么还要注资？</text>
			</view>
			<view class="answer_box">
				<image src="../../static/indexImage/answer_icon.png" mode=""></image>
				<text>
					一般来说，电影出品公司一年要拍好几部电影，需要 更快回笼资金，投入拍摄下一部影片。所以出品公司 会出让小部分份额出来，交给第三方平台集资，目的 也是为了宣传影片。
				</text>
			</view> -->
		</view>
		<button type="default" class="btn buy_btn" hover-class="none" v-if="goodsInfo.sale < 100" @click="toBuy">认购</button>
		<button type="default" class="btn no_buy" v-else>已售罄</button>
		<u-popup v-model="popShow" mode="bottom" border-radius="20" :closeable="true">
			<view class="pop_content">
				<view class="title">我和我的祖国</view>
				<view class="number_box">
					<text>购买份数</text>
					<u-number-box v-model="number" :min="1" @change="valChange"></u-number-box>
				</view>
				<button type="default" class="btn buy_btn" @click="sure">确认</button>
			</view>
		</u-popup>
		<sa-hover-menu :toShow="toShow" @toShow="calculationPop"></sa-hover-menu>
		<u-popup v-model="toShow" mode="bottom" border-radius="20" :closeable="true" z-index="999">
			<view class="pop_content">
				<view class="title">投资收益计算</view>
				<view class="calculation_content">
					<view class="calculation_item">
						<text class="text">制作成本</text>
						<text>{{film.f_cost}}亿</text>
					</view>
					<view class="calculation_item">
						<text class="text">票房预估</text>
						<view class="item_right">
							<input type="number" value="" placeholder="0" class="number_input" v-model="boxOfficeForecast" @input="boxOffice"/>
							<view class="selectUnit" @click="selectUnit">
								<text>{{ unit }}</text>
								<u-icon name="arrow-down" color="#2E2E2E" size="10"></u-icon>
							</view>
						</view>
					</view>
					<view class="calculation_item">
						<text class="text">投资金额</text>
						<view class="item_right">
							<input type="number" value="" placeholder="0" class="number_input" v-model="investmentAmount" @input="investment"/>
							<view class="selectUnit" @click="selectUnitTwo">
								<text>{{ unitTwo }}</text>
								<u-icon name="arrow-down" color="#2E2E2E" size="10"></u-icon>
							</view>
						</view>
					</view>
					<view class="calculation_item">
						<text class="text">投资占比</text>
						<text>{{proportion}}</text>
					</view>
					<view class="calculation_item">
						<text class="text">预计收益</text>
						<text>{{ profit }}</text>
					</view>
				</view>
				<button type="default" class="btn buy_btn" @click="closePop">确认</button>
			</view>
		</u-popup>
		<u-select v-model="unitShow" mode="single-column" confirm-color="#da251d" :list="unitList" @confirm="unitConfirm"></u-select>
		<u-select v-model="unitShowTwo" mode="single-column" confirm-color="#da251d" :list="unitList" @confirm="unitConfirmTwo"></u-select>
	</view>
</template>

<script>
import saHoverMenu from '../../components/sa-hover-menu/sa-hover-menu.vue';
export default {
	components: {
		saHoverMenu
	},
	data() {
		return {
			goodsInfo: {
				sale: 60,
				cost: '2.1亿',
			},
			value: 4,
			count: 5,
			recommendList: [
				
			],
			number: 1,
			popShow: false,
			toShow: false,
			unitList: [
				{
					label: '亿',
					value: '100000000'
				},
				{
					label: '万',
					value: '10000'
				}
			],
			unitShow: false,
			unitShowTwo: false,
			unit: '亿',
			unitTwo: '亿',
			investmentAmount: '', //投资金额
			boxOfficeForecast: '', //票房预估
			question:'',
			article:'',
			film:'',
			f_progress:'',
			estimateUnit:2,//评估单位
			investmentUnit:2,//预估单位
			fid:'',
			proportion:'',
			profit:'',
		};
	},
	onLoad(option) {
		this.fid=option.id
		this.$http.post('Index/detail',{fid:option.id}).then(async res => {
	
			let {order,article,film,question} =await res.data
			this.recommendList=order
			this.question=question
			this.article=article
			this.film=film
			this.f_progress=Number(film.f_progress)
			
		})
	},
	methods: {
		agreementDetail() {
			console.log('认购协议');
			uni.navigateTo({
				url:'/pages/subscription/subscription'
			})
		},
		toBuy() {
			this.popShow = true;
		},
		valChange(e) {
			console.log('当前值为: ' + e.value);
		},
		sure() {
			console.log('确认');
		},
		calculationPop(val) {
			this.toShow = val;
		},
		closePop() {
			// this.toShow = false;
			this.$http.post('Index/calculator',{fid:this.fid,estimate:this.boxOfficeForecast,investment:this.investmentAmount,estimateUnit:this.estimateUnit,investmentUnit:this.investmentUnit}).then(async res => {
				console.log(res.data)
				let {result1,result2} =await res.data
				this.proportion=result1
				this.profit=result2
				
				
			})
		},
		selectUnit() {
			this.unitShow = true;
		},
		selectUnitTwo() {
			this.unitShowTwo = true;
		},
		unitConfirm(e) {
			this.unit = e[0].label
			this.estimateUnit = this.unit==='亿' ? 2 : 1
			console.log(this.estimateUnit)
		},
		unitConfirmTwo(e) {
			this.unitTwo = e[0].label
			this.investmentUnit = this.unitTwo==='亿' ? 2 : 1
		},
		investment(e) {
			this.investmentAmount = e.detail.value 
			console.log('投资金额', this.investmentAmount)
		},
		boxOffice(e) {
			this.boxOfficeForecast = e.detail.value 
			console.log('票房预估', this.boxOfficeForecast)
		}
	},
	computed: {
		//预计收益
		// profit() {
		// 	let number = Number(this.investmentAmount) * (this.unitTwo == '亿' ? 100000000 : 10000) / 210000000 * 100
		// 	return (Number(this.boxOfficeForecast) * (this.unit == '亿' ? 100000000 : 10000) * 0.36 * number).toFixed(2);
		// },
		// // 投资占比
		// proportion() {	
		// 	return parseFloat(Number(this.investmentAmount) * (this.unitTwo == '亿' ? 100000000 : 10000) / 210000000 * 100).toFixed(2) + '%'
		// }
	}
	
};
</script>

<style lang="scss" scoped>
.banner_img {
	image {
		width: 100%;
		height: 300upx;
		border-radius: 15upx;
	}
	margin-bottom: 38upx;
}

.info_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.price {
		color: $red;
		font-size: 36upx;
		font-weight: bold;
		padding-bottom: 40upx;
	}
	.title {
		padding-bottom: 40upx;
		font-size: 34upx;
	}
	.info_left {
		font-size: 26upx;
		margin-bottom: 36upx;
		display: flex;
		align-items: center;
		flex: 1;
		white-space: nowrap;
	}
	.info_right {
		margin-bottom: 36upx;
		font-size: 28upx;
		color: $red;
		display: flex;
		align-items: center;
		margin-left: 20upx;
		image {
			width: 28upx;
			height: 32upx;
			margin-right: 10upx;
		}
	}
	.is_sale {
		font-size: 26upx;
		color: #f1736d;
	}
}

.headline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title_box {
		font-size: 32upx;
		position: relative;
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 12upx;
			background: $red;
			border-radius: 17upx;
			opacity: 0.8;
			position: absolute;
			bottom: -2upx;
		}
	}
}

.project_info {
	padding: 40upx 0;
	.project_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28upx;
		padding: 20upx 0;
		border-bottom: 2upx solid #eeeeee;
	}
}

.color-red {
	color: $red;
}

.film_info {
	font-size: 28upx;
	line-height: 48upx;
	padding: 32upx 0;
}
.content_info {
	font-size: 28upx;
	line-height: 48upx;
	margin-bottom: 40upx;
}

.img_box {
	margin: 35upx 0;
}

.recommend_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 20upx;
	.recommend_item {
		margin-bottom: 30upx;
		image {
			width: 330upx;
			height: 180upx;
			border-radius: 10upx;
			margin-bottom: 20upx;
		}
		text {
			display: block;
			font-size: 28upx;
		}
	}
}

.question_box {
	display: flex;
	align-items: center;
	margin-bottom: 23upx;
	image {
		width: 30upx;
		height: 30upx;
		margin-right: 20upx;
	}
}
.answer_box {
	display: flex;
	margin-bottom: 32upx;
	image {
		width: 30upx;
		height: 30upx;
		margin-right: 20upx;
		margin-top: 8upx;
	}
	text {
		color: $color-666;
		flex: 1;
	}
}

.btn {
	height: 60upx;
	border-radius: 8upx;
	font-size: 32upx;
	line-height: 60upx;
	color: #ffffff;
	border: none;
	&::after {
		border: none;
	}
}

.buy_btn {
	background: #373846;
}

.no_buy {
	background: #d5d6dc;
	position: fixed;
	bottom: 20upx;
	width: 90%;
	left: 50%;
	transform: translate(-50%);
}

.pop_content {
	padding: 20upx;
	.title {
		font-size: 34upx;
		margin-bottom: 50upx;
	}
	.number_box {
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		margin-bottom: 88upx;
	}
	.calculation_content {
		padding-bottom: 35upx;
		.calculation_item {
			padding: 15upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			.text {
				color: $color-666;
			}
			.item_right {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.number_input {
					width: 90upx;
					text-align: right;
					border-bottom: 2upx solid #e2e2e2;
					margin-right: 15upx;
				}
			}
		}
	}
}

// .calculation_box {
// 	width: 100upx;
// 	height: 100upx;
// 	background: #ffffff;
// 	border: 2upx solid #f7837d;
// 	border-radius: 50%;
// 	position: fixed;
// 	left: 30upx;
// 	bottom: 300upx;
// 	display: flex;
// 	align-items: center;
// 	flex-direction: column;
// 	justify-content: center;
// 	color: $red;
// 	font-size: 20upx;
// 	image {
// 		width: 30upx;
// 		height: 30upx;
// 	}
// }
</style>

<style>
page {
	padding: 30upx;
	color: #2e2e2e;
}
</style>
